<template>
	<view class="execute">
		<titleName :name="name" :backShow="true"></titleName>
		<view style="width: 100vw;height: 4upx;background: #F3F5F7;">

		</view>
		<view class="container">

			<view class="sel-val">
				<view class="line">
					<view class="name"><text class="star">*</text>企业名称</view>
					<view class="val"> <input type="text" disabled v-model="params.enterprise" /></view>
				</view>
				<view class="line">
					<view class="name"><text class="star">*</text>整改内容</view>
					<view class="val content">
						<textarea maxlength="-1" disabled v-model="params.content" placeholder="请输入整改内容" />
					</view>
				</view>
				<view class="line">
					<view class="name"><text class="star"></text>备注</view>
					<view class="val remark">
						<textarea maxlength="-1" v-model="params.remark" placeholder="请输入备注" />
					</view>
				</view>
				<view class="upload-wrap">
					<view class="name"><text class="star">*</text>落实照片（最少3张）</view>
					<view class="img-wrap">
						<view :class="['for-image',index==2?'sb':'']" v-for="(item,index) in images" :key="index">
							<image :src="item" mode="" @click="searchImg(index)">
							</image>
							<view class="dele" v-if="status!=1" @click="deleImage(index)">✕</view>
						</view>
						<view class="sel-img" @click="uploadImg" v-if="status!=1">
							<image :src="resourceUrl+'mine-upload-icon.png'" mode=""></image>
							<text>（选择图片）</text>
						</view>
					</view>
				</view>
				<view class="btn-wrap" v-if="status!=1">
					<button class="btn" @click="submit">提交</button>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import uploadFile from '../../request/uploadFile'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	let usertype = ref('')
	let params = ref({})
	let images = ref([])
	let followattachurl = ref([])
	let followremark = ref('')
	let name = "整改执行"
	let ids = ref('')
	let status = ref('')
	let noticeid = ref('')
	let searchImg = (index) => {
		uni.previewImage({
			urls: images.value,
			current: index
		})
	}
	let dateChange = (e) => {
		console.log(e, 'e');
	}
	let deleImage = (index) => {

		images.value.splice(index, 1)

	}
	let range = ref([{
			value: 0,
			text: "篮球"
		},
		{
			value: 1,
			text: "足球"
		},
		{
			value: 2,
			text: "游泳"
		},
	])
	let getPhoto = (e) => {
		console.log(e, 'e');
	}
	let change = (e) => {
		console.log(e, 'e');
	}
	let submit = () => {
		if (!params.value.enterprise || !params.value.content) {
			uni.showToast({
				title: "企业名称、整改内容不能为空",
				icon: "none"
			})
			return
		}
		if (images.value.length == 0) {
			uni.showToast({
				title: "请上传落实图片",
				icon: "none"
			})
			return
		}
		if (images.value.length <= 2) {
			uni.showToast({
				title: "落实图片最少三张",
				icon: "none"
			})
			return
		}
		http({
			url: "/greenNotice/sayFollow",
			data: {
				followattachurl: images.value.join(','),
				...params.value,
				id: noticeid.value
			}
		}).then((res) => {
			if (res.code == 0) {

				uni.showToast({
					title: "提交成功",
					icon: 'none',
					duration: 1500
				})
				setTimeout(() => {
					uni.redirectTo({
						url: `/messagePageOther/messageDetail/index?id=${ids.value}`
					})
				}, 1500)

			}
		})

	}
	onLoad((e) => {
		usertype.value = uni.getStorageSync('usertype')
		params.value.enterprise = e.enterprise
		params.value.content = e.content
		ids.value = e.id
		noticeid.value = e.noticeid
		followattachurl.value = e.followattachurl
		followremark.value = e.followremark
		status.value = e.status
		if (e.status == 1) {
			images.value = e.followattachurl.split(',')
			params.value.remark = e.followremark
		} else {

		}
	})
	let uploadImg = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'],
			count: 20,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							images.value.push(res.data.url)
						}

					})
				}

			}
		});
	}
	onShow(() => {


	})
</script>

<style lang="scss" scoped>
	.execute {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		:deep(.uni-date) {
			width: 100%;
			height: 94rpx;
			line-height: 94upx;
			border: none !important;
		}

		:deep(.uni-date-x) {

			background-color: #F5F6F8;
		}

		:deep(.uni-date-x--border) {
			border: none !important;
		}

		:deep(.ph-class) {

			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 29rpx;
			color: #999999;

		}

		:deep(.uni-select) {
			height: 94rpx;
			line-height: 94upx;
			border: none !important;
			padding-left: 0upx !important;
		}

		.container {
			height: calc(100vh - 160upx);
			padding-bottom: 170upx;
			overflow: scroll;
			padding-top: 48upx;

			// &:first-of-type(1),
			// &:first-of-type(2),
			// &:first-of-type(3) {
			// 	margin-top: 0upx !important;
			// }

			.top-img {
				padding: 48upx 145upx 20upx 115upx;


				image {
					width: 100%;
					height: 95upx;
				}
			}

			.sel-val {
				padding: 0 40upx 0 50upx;


				.principal {
					margin-bottom: 45upx;
					overflow: hidden;

					.signature {
						width: 100%;
						height: 403rpx;
						background: #F5F6F8;
						border-radius: 7rpx;
						padding: 42upx 40upx 30upx 40upx;

					}

					.name {
						display: flex;
						align-items: center;
						margin-bottom: 30upx;

						.star {
							color: #FF0000;
						}
					}

					.val {
						display: flex;
						align-items: center;
						height: 94rpx;
						border-radius: 7rpx;
						margin-bottom: 40upx;

						text {
							width: 98upx;
							text-align: center;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 34rpx;
							color: #000000;

						}

						.phone {
							width: 100%;
							background: #F5F6F8 !important;
							margin-left: 14upx;

							input {
								height: 94rpx;
								line-height: 94upx;
								padding-left: 40upx;
							}
						}
					}
				}

				.btn-wrap {
					margin-top: 90upx;

					.btn {
						width: 100%;
						height: 87rpx;
						background: #0874FA;
						border-radius: 43rpx;
						line-height: 87upx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;

					}
				}

				.img-wrap {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.for-image {
						width: 200rpx;
						height: 200rpx;
						position: relative;
						margin-left: 18upx;
						margin-bottom: 15upx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 5upx;
						}

						.dele {
							width: 34rpx;
							height: 34rpx;
							background: #989A9E;
							border-radius: 50%;
							position: absolute;
							right: -15rpx;
							top: -15rpx;
							color: #fff;
							font-size: 20upx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

					}

					.sel-img {
						width: 200rpx;
						height: 200rpx;
						border: 2px dashed #BFBFBF;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-left: 18upx;
						margin-bottom: 15upx;

						image {
							width: 56upx;
							height: 50upx;
						}

						text {

							height: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
							margin-top: 17upx;
						}
					}
				}


				.upload-wrap {

					background: #FFFFFF;
					border-radius: 7rpx;



					.name {
						display: flex;
						margin-bottom: 50upx;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 34rpx;
						color: #000000;


						.star {
							color: #FF0000
						}
					}


				}

				.line {
					margin-bottom: 45upx;

					.chengnuoshu {
						height: 578upx;
						width: 100%;


					}

					.name {
						display: flex;
						align-items: center;
						margin-bottom: 30upx;

						.star {
							color: #FF0000;
						}


					}

					.val {

						width: 100%;
						height: 94rpx;
						background: #F5F6F8 !important;
						border-radius: 7rpx;
						padding-left: 20upx;

						input {
							width: 100%;
							height: 94upx;
							line-height: 94upx;
						}
					}

					.val.content {

						height: 261rpx;
						background: #F5F6F8;
						border-radius: 7rpx;

						padding-bottom: 40upx;

						textarea {
							width: 100%;
							height: 251rpx;
							padding: 10upx;
							line-height: 50upx;
						}
					}

					.val.remark {
						height: 210rpx;
						background: #F5F6F8;
						border-radius: 7rpx;


						textarea {
							width: 100%;
							height: 200rpx;
							padding: 10upx;
							line-height: 50upx;
						}
					}
				}

				.line.date {
					.val {
						padding-left: 20upx;
					}
				}
			}
		}


	}
</style>